<template>
	<view class="cargoP">
		<u-navbar :is-back="true" :custom-back='goBack' title="计费方式" back-text=''>
		</u-navbar>
		<view class="showDataC">
			<view class="showDataC-item" v-for="(item, index) in dataList" :key="index">
				<view class="showDataC-item-child">
					<view class="showDataC-item-content">
						<view style="margin: 0.2rem; color: #999;">
							产品类型：<text style="color: #000;">{{getProductType(item.type)}}</text>
						</view>
						<view style="margin: 0.2rem;color: #999;">
							设备ID：<text style="color: #000;">{{item.deviceId}}</text>
						</view>
						<view style="margin: 0.2rem;color: #999;display: flex;">
							设备备注：<input style="color: #000;">{{item.remarks}}</input>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="button">
			<u-button @click="gotoNext()" type="success" style="border-radius: 0;">设置计费方式</u-button>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import {
		AppModule
	} from "../../store/modules/app";

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;


		public dataList: any = []; //数据源
		public snList: any = []; //
		public webId: any = '';

		created() {

		}
		onHide() {
			uni.hideLoading();
		}


		onLoad(option: any) {
			if (option.data) {
				var dic = JSON.parse(option.data)
				this.snList = dic.snlist
				this.webId = dic.webId
				this.dataList = dic.list
			}
		}

		onShow() {

		}

		mounted() {

		}


		//
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		}

		//产品类型
		getProductType(type: any) {
			if (type == '0') {
				return '充电宝'
			} else if (type == '1') {
				return '底座'
			} else if (type == '2') {
				return '充电线'
			}
		}


		//充电线 去铺货
		gotoNext() {
			var list: any = [];
			this.dataList.filter((itemd: any, indexd: any) => {
				var dic = {
					sn: itemd.sn,
					description: itemd.description
				}
				list.push(dic)
			})
			var dic = {
				list: list,
				webId: this.webId
			}
			uni.navigateTo({
				url: "./unifiedSet?data=" + encodeURIComponent(JSON.stringify(dic)),
			});
		}


	}
</script>


<style lang="scss" scoped>
	page {
		background-color: #F3F5F7;
	}

	/deep/.u-cell-box {
		height: 20rem;
		overflow-y: scroll;
	}

	/deep/.u-dropdown {
		width: 100%;
		justify-content: flex-end;
		display: flex;
		padding-right: 3rem;
	}

	.searchPP {
		background-color: white;
		padding: 0.5rem;
	}

	.searchP {
		background-color: white;
		display: flex;
	}

	.showDataC {
		display: flex;
		flex-wrap: wrap;
		padding: 1rem 0.5rem;
		justify-content: space-between;
	}

	.showDataC-item {
		line-height: 1.3rem;
		width: 100%;
		position: relative;
	}

	.Icon {
		position: absolute;
		right: 0.25rem;
	}

	.showDataC-item-child {
		margin: 0.25rem;
		border-radius: 0.25rem;
		border: 1px solid #02B074;
	}

	.showDataC-item-content {
		padding: 0.5rem;
	}

	.Icon-bottom {
		position: absolute;
		bottom: 0.75rem;
		right: 0.75rem;
	}

	.button {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
